<template>
      
  <div class ="login">  
      
      <h2 style="text-align:center;color:white;padding:20px"> <pre>登&nbsp;录</pre></h2>
      
      <div align="center" style="margin-top:30px">
         <img src="../../assets/logo.png" alt="logo" class="logo_style"/>
      </div>
     
      <div class="input_tip" align="center">账户： <input type="text" class="input_style" placeholder="name" @input="nameInput" @change="nameChange"/><br/>
            {{name | capitalize}}
      </div>
       
      <div class="input_tip" align="center">密码： <input type="password" ref="ps" class="input_style" placeholder="password"/><br/>
          <span @click="showPS" >显示密码</span>
          <img :src="imgbody"  @click="clickImg" />
      </div>
      
      <div class = "bottom">
            <button class="bt_style" @click="toHome" ><pre>登&nbsp;录</pre></button>

            <button class="bt_style" @click="toRegister" ><pre>注&nbsp;册</pre></button>
      </div>

  </div>

</template>

<script type="text/ecmascript-6">
export default {
  name: 'login',
  data:function(){
    return {
        name:'',
        imgbody: this.http.getBaseURL()+'/api/getKaptcha',
        screenHeight:document.body.clientHeight
    }
  },
  beforeCreate () {
    //document.querySelector('body').setAttribute('style', 'background-color:rgb(6, 212, 57)')

  },
  created:function(){
      var This = this;
    //post 默认提交JSON数据
    //   this.$http.post('http://192.168.11.224:8686/api/getKaptcha',{headers:{'Content-Type':'image/jpeg'},body:{responseType: 'arraybuffer'}}).then(function(json){
    //         alert(JSON.stringify(json));
    //         let bytes = new Uint8Array(json.body);
    //         let data = "";
    //         let len = bytes.byteLength;
    //         for (let i = 0; i < len; i++) {
    //             data += String.fromCharCode(bytes[i]);
    //         }

    //       //  This.imgbody = 'data:image/jpeg;base64,' + window.btoa(data);

    //   },function(error){

    //   });
    //post  设置 {emulateJSON: true} 提交表单数据
    //   this.$http.post('http://192.168.11.163:8081/api/addPerson',{id:12,lastname:"nw",firstName:"du",address:"haizhu",city:"guangzhou"},{emulateJSON: true}).then(function(json){
    //         alert(JSON.stringify(json));
    
    //   },function(error){

    //   });

//    this.http.get(this.api.getKaptcha)
//          .then(res => {
//              alert(JSON.stringify(res));
//             if(res.code == 200){
//                 this.info = res.data.list
//                 this.page = res.data
//             }
//          });

//    this.http.toCancelRequest();

    

  },
  mounted:function(){
     const that = this
     window.onresize = () => {
        return (() => {
           window.screenHeight = document.body.clientHeight

            that.screenHeight = window.screenHeight
        
        })
    }
    
  },
  watch:{
    
  },
  methods:{
      clickImg(){
         this.imgbody = this.http.getBaseURL() +'/api/getKaptcha?date='+new Date();
      },
     toHome(){
         this.$router.push("/home");
     },
     toRegister(){

     },
     nameInput(event){
        //alert('input:'+ event.srcElement.value)
        this.name = event.srcElement.value;
     },
     nameChange(event){
         alert('change: 最终输入值：'+ event.srcElement.value)
     },
     showPS(){
         var type = this.$refs.ps.type;
        if(type == 'password'){
            this.$refs.ps.type = 'text'
        }else if(type == 'text'){
            this.$refs.ps.type = 'password'
        }
        
     }
  },
  computed:{


  },
  components: {
      
  },
  filters: {
     //过滤
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.login {

    background-color: rgb(6, 212, 57);
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow-y:auto;

    .logo_style{
        width: 80px;
    }

    .input_tip{
        width: 80%;
        margin:  0px auto;
        // background-color: black;
    }
    .input_style {
        padding-left: 12px;
        width: 75%;
        height: 60px;
        margin: 20px;
    }
    
    .bt_style{
        width: 80%;
        height: 60px;
        position: relative;
        left: 10%;
        margin-top:40px;
        //top:20px;
    }
    
}

</style>
